<div class="users">
  <!-- 面包屑导航 -->
  <el-breadcrumb scoped class="breadcrumb" separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-input placeholder="请输入内容" v-model="searchText">
        <el-button @click="queryUsers" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </el-col>
    <el-col :span="3">
      <el-button @click="addUserDialog">添加用户</el-button>
    </el-col>
  </el-row>
  <el-table :data="userList" style="width: 100%">
    <el-table-column prop="username" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="email" label="邮箱" width="180">
    </el-table-column>
    <el-table-column prop="mobile" label="电话">
    </el-table-column>
    <el-table-column prop="mg_state" label="用户状态">
      <template slot-scope="scope">
        <!-- scope.row可以获取当前行的数据 -->
        <el-switch v-model="scope.row.mg_state" @change="changeUserState(scope.row)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="editUserDialog(scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" plain @click="deleteUser(scope.row.id)"></el-button>
        <el-button @click="openAssignDialog(scope.row)" type="success" plain size="mini"><i class="el-icon-check"></i> 分配角色</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination @current-change="currentChange" background layout="prev, pager, next" :total="total" :page-size="2"
    :current-page="pageNum">
  </el-pagination>
  <!-- 添加用户对话框 -->
  <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
    <el-form :model="addUser" :rules="rules" ref="addUser" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addUser.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addUser.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addUser.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="addUser.mobile"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeAddDialog">取 消</el-button>
      <el-button type="primary" @click="addUserData">确 定</el-button>
    </div>
  </el-dialog>
  <!-- 编辑用户对话框 -->
  <el-dialog title="编辑用户" :visible.sync="dialogEditVisible">
    <el-form :model="editUserForm" label-width="100px">
      <el-form-item label="用户名">
        <el-tag type="info">{{editUserForm.username}}</el-tag>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="editUserForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="editUserForm.mobile"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogEditVisible = false">取 消</el-button>
      <el-button type="primary" @click="editUser">确 定</el-button>
    </div>
  </el-dialog>
  <!-- 分配角色对话框 -->
  <el-dialog title="分配角色" :visible.sync="dialogAssignVisible">
    <el-form :model="assignRolesForm" label-width="100px">
      <el-form-item label="用户名">
        <el-tag>{{assignRolesForm.username}}</el-tag>
      </el-form-item>
      <el-form-item label="角色列表">
        <el-select v-model="assignRolesForm.rid" placeholder="请选择角色">
          <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogAssignVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmAssignRoles">确 定</el-button>
    </div>
  </el-dialog>
</div>
